<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input
          type="text"
          placeholder="enter the name you search"
          v-model="keyWord"
        />&nbsp; 
        <button @click="searchUsers">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "Header",
  data() {
    return {
        keyWord:''
    }
  },
  methods:{
    async searchUsers(){
        this.$bus.$emit("getUsers",{isSearch: false, isLogin:true, errmsg:'',users:[] } )
        await axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
            response =>{
                console.log("请求成功" );
                this.$bus.$emit("getUsers",response.data.items)
                this.$bus.$emit("getUsers",{ isLogin:true, errmsg:'',users:response.data.items } )
            },
            error => {
                console.log('请求失败',error.message);
                this.$bus.$emit("getUsers",{ isLogin:false, errmsg:error.message,users:[]} )
            }
        )
    }
  }
};
</script>

<style lang="css" scoped>
</style>